<template>
    <div id="setinfo" style="background: #f7f7f7;  height:100vh">
        <van-nav-bar title="个人信息" left-text="" left-arrow @click-left="onClickLeft" />
        <div class="image">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/lzl/upload1" :show-file-list="false"
                :on-success="handleAvatarSuccess" :http-request="uploadImage" :before-upload="beforeUpload">
                <img v-if="imageUrl" :src="imageUrl" :class="mo === true ? 'no_avatar' : 'avatar'" />
                <el-icon v-else class="avatar-uploader-icon">
                    <!-- <Plus /> -->
                    <van-icon name="manager" />
                </el-icon>
                <div v-if="loading" class="loading-overlay">
                    <el-icon class="el-icon-loading"></el-icon>
                </div>
            </el-upload>
        </div>
        <div class="userinfo">
            <div class="info-item"><span>用户名：</span><span>小胡呼呼呼</span></div>
            <div class="info-item"><span>UID：</span><span>28991176</span></div>
        </div>



    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import COS from 'cos-js-sdk-v5'
import axios from 'axios';
import { showSuccessToast, showFailToast } from 'vant';
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
let loading = ref(false)
const mo = ref(false)
// 
const userid = ref('')

// API方法
import { shenhe } from '@/http/Lzl'
import { Header } from 'ant-design-vue/es/layout/layout';


const onClickLeft = () => {
    window.location.href = '/me'
}

let inputRef = ref('')
let imageUrl = ref('')
let img = ref('')


const handleimg = () => {
    // console.log();
    inputRef.value.click();
}



const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    console.log(URL.createObjectURL(uploadFile.raw!))
}

const beforeUpload = () => {
    loading.value = true
}

// 选择图片上传
const uploadImage = async (params: any) => {
    console.log(params.file)
    const cos = new COS({
        SecretId: 'AKID43EH8kM1YwIzUvDG6lBMPq2AAvRijUDo',
        SecretKey: 'ThgRzIEyjOo0zmKfqqdEeqrfFblhQB1o'
    })

    try {
        const data = await cos.putObject({
            Bucket: '3065060034-1326451460',
            Region: 'ap-beijing',
            Key: params.file.name,
            StorageClass: 'STANDARD',
            Body: params.file
        })

        if (data.statusCode === 200 && data.Location) {
            console.log(data.Location, 1111111111111)
            const res = await axios.post('http://localhost:3000/lzl/shen', {
                url: 'http://' + data.Location,
                file: params.file.name
            })

            if (res.data.status === 400) {
                mo.value = true
                console.log(res.data.data)
                console.log(res.data.msg)
                console.log(res.data.translatedText)
                ElMessage({
                    message: `存在${res.data.translatedText}方面的违规,请重新上传图片`,
                    type: 'error'
                })
                img.value = ''
                imageUrl.value = ''
            } else {
                img.value = data.Location
                imageUrl.value = data.Location
                const formData = new FormData();
                formData.append('file', params.file);
                const res = await axios.post(`http://127.0.0.1:3000/lzl/upload1?userid=${userid.value}`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                })
                console.log(res);

                ElMessage({
                    message: `图片不存在违规`,
                    type: 'success'
                })
            }
        } else {
            console.log(data.error?.message) // 上传失败提示消息
            ElMessage({
                message: '上传失败，请重试',
                type: 'error'
            })
        }
    } catch (err) {
        console.error('上传失败:', err)
        ElMessage({
            message: '上传失败，请重试',
            type: 'error'
        })
    } finally {
        loading.value = false
    }
}


onMounted(() => {
    const userinfo = JSON.parse(localStorage.getItem('user'))
    userid.value = userinfo._id
})

</script>

<style scoped lang="less">
.userinfo {
    margin: 0 .5669rem;
    background: #fff;
    border-radius: 1.1337rem;
    margin-top: 2.8343rem;
}

.image {
    display: flex;
    margin-top: 5.6686rem;
    justify-content: center;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: .5669rem;

}

.item {
    display: flex;
    justify-content: space-between;
    padding: .5669rem;
}
</style>
<style scoped>
/* 不违规样式 */
.avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    display: block;
}

.avatar-uploader .no_avatar {
    width: 80px;
    height: 80px;
    display: block;
    filter: blur(5px);
    /* 调整模糊程度 */
    transition: filter 0.3s;
    /* 添加过渡效果 */
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.el-icon-loading {
    font-size: 24px;
    color: #409EFF;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    border-radius: 50%;

}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;

}

.avatar1 {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 50%;
}
</style>